<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册会员</title>
    <style>
        .captcha-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .captcha-input {
            width: 150px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .captcha-refresh {
            margin-left: 10px;
            padding: 8px 12px;
            background-color: #31c27c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .captcha-refresh:hover {
            background-color: #2a9d6e;
        }
        
        .captcha-display {
            margin-left: 10px;
            padding: 8px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-weight: bold;
            font-family: Arial, sans-serif;
            font-size: 16px;
            letter-spacing: 2px;
            color: #333;
        }
        
        .salary-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .salary-slider {
            flex-grow: 1;
            margin: 0 10px;
        }
        
        .salary-value {
            width: 60px;
            text-align: right;
        }
        
        .photo-preview {
            margin-top: 10px;
            border: 1px dashed #ccc;
            padding: 10px;
            text-align: center;
            min-height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .preview-image {
            max-width: 100%;
            max-height: 200px;
            margin-top: 10px;
        }
        
        .preview-text {
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p style="color: blue;">欢迎注册会员</p>
    <form action="">
        <label><strong>手机号码：</strong></label>
        <input type="text" placeholder="11位手机号">
        <span style="color: red;">必填</span>
        <br><br>
        
        <label><strong>创建密码：</strong></label>
        <input type="password" placeholder="8位密码">
        <span style="color: red;">必填</span>
        <br><br>
        
        <label><strong>注册邮箱：</strong></label>
        <input type="text" placeholder="例如wustzz@sina.com">
        <span style="color: red;">必填</span>
        <br><br>
        
        <label><strong>验证码：</strong></label>
        <div class="captcha-container">
            <input type="text" id="captchaInput" class="captcha-input">
            <div id="captchaDisplay" class="captcha-display">UJFq</div>
            <button type="button" id="refreshBtn" class="captcha-refresh">↻</button>
        </div>
        <br><br>
        
        <label><strong>性别：</strong></label>
        <label><input type="radio" name="gender">男</label>
        <label><input type="radio" name="gender">女</label>
        <br><br>
        
        <label><strong>生日：</strong></label>
        <input type="text" value=" 年 /月/日">
        <br><br>
        
        <label><strong>年龄：</strong></label>
        <input type="text">
        <br><br>
        
        <label><strong>籍贯：</strong></label>
        <select>
            <option>湖北省</option>
            <option>北京市</option>
        </select>
        <select>
            <option>武汉</option>
            <option>襄阳</option>
        </select>
        <br><br>
        
        <label><strong>个人学历：</strong></label>
        <select>
            <option>本科</option>
            <option>硕士</option>
            <option>博士</option>
        </select>
        <br><br>
        
        <label><strong>月薪：</strong></label>
        <div class="salary-container">
            <input type="range" min="1000" max="10000" value="5000" class="salary-slider" id="salarySlider">
            <span id="salaryValue" class="salary-value">5000</span>
        </div>
        <br><br>
        
        <label><strong>个人爱好：</strong></label>
        <label><input type="checkbox" name="hobby">唱歌</label>
        <label><input type="checkbox" name="hobby">跑步</label>
        <label><input type="checkbox" name="hobby">游泳</label>
        <br><br>
        
        <label><strong>个人照片：</strong></label>
        <input type="file" id="photoInput" accept="image/*">
        <div id="photoPreview" class="photo-preview">
            <div class="preview-text">点击选择图片或拖拽上传</div>
        </div>
        <br><br>
        
        <label><strong>个人简介：</strong></label>
        <textarea rows="5" cols="50"></textarea>
        <br><br>
        
        <button type="submit">提交</button>
        <button type="reset">重填</button>
    </form>

    <script>
        // 验证码生成函数
        function generateCaptcha() {
            const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let captcha = '';
            for (let i = 0; i < 4; i++) {
                captcha += chars.charAt(Math.floor(Math.random() * chars.length));
            }
            return captcha;
        }

        // 显示验证码
        function displayCaptcha() {
            const captcha = generateCaptcha();
            document.getElementById('captchaDisplay').textContent = captcha;
            return captcha;
        }

        // 刷新验证码
        document.getElementById('refreshBtn').addEventListener('click', function() {
            displayCaptcha();
        });

        // 页面加载时显示初始验证码
        window.onload = function() {
            displayCaptcha();
            
            // 月薪滑块值显示
            const salarySlider = document.getElementById('salarySlider');
            const salaryValue = document.getElementById('salaryValue');
            
            salarySlider.addEventListener('input', function() {
                salaryValue.textContent = this.value;
            });
            
            // 照片预览功能
            const photoInput = document.getElementById('photoInput');
            const photoPreview = document.getElementById('photoPreview');
            
            photoInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        const img = document.createElement('img');
                        img.src = event.target.result;
                        img.className = 'preview-image';
                        
                        // 清空之前的预览内容
                        photoPreview.innerHTML = '';
                        photoPreview.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                }
            });
        };
    </script>
</body>
</html>